<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>经营单位</title>
</head>
<body>
<div
  layout:fragment="content"
  class="container"
>
  <div id="app" v-cloak>
    <div class="container">
      <div class="myHeader">
        <div class="myHeader-title">
          修改机房信息
        </div>
      </div>
      <table
        width="100%"
        border="0"
        class="el-table el-table--border"
        cellspacing="0"
        cellpadding="0"
      >
        <tbody>
        <tr>
          <td

            width="200"
          >所属经营单位<span style="color:red">*</span>
          </td>
          <td class="ContentTD">
            <el-select v-model="formData.idcId"
                       name="idcId"
                       v-validate="'required'">
              <el-option v-for="oper in operList" :value="oper.idcId" :key="oper.idcId"
                         :label="oper.operName"></el-option>
            </el-select>
            <div
              id="idcId_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('idcId')">请选择所属经营单位</span>
            </div>
        </tr>
        <tr>
          <td>机房名称<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-input
              v-validate="'required|max:128|house_name_validate'"
              v-model="formData.houseName"
              data-vv-delay="1000"
              name="houseName"
              maxlength="128"
            ></el-input>
            <div
              id="houseName_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseName:required')">请填写您的机房名称</span>
              <span class="field-error" v-show="errors.has('houseName:max')">机房名称长度最大为 128 位</span>
              <span class="field-error" v-show="errors.has('houseName:house_name_validate')">机房名称已存在</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>机房性质<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-radio-group v-model="formData.houseType">
              <el-radio :label="1">租用</el-radio>
              <el-radio :label="2">自建</el-radio>
              <el-radio :label="999">其它</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            <label>所在省或直辖市<span style="color:red">*</span></label>
          </td>
          <td class="ContentTD">
            <el-select
              v-model="formData.houseProvince"
              name="houseProvince"
              default-value="所在省"
              v-validate="'required'"
            >
              <el-option v-for="[key,val] in provinceMapComputed" :value="key" :label="val" :key="key"></el-option>
            </el-select>
            <div
              id="houseProvince_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseProvince')">请选择所在省</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <label>所在市或区<span style="color:red">*</span></label>
          </td>
          <td class="ContentTD">
            <el-select
              v-model="formData.houseCity"
              name="houseCity"
              default-value="所在市或区"
              v-validate="'required'"
            >
              <el-option v-for="[key,val] in cityMapComputed" :label="val" :value="key" :key="key"></el-option>
            </el-select>
            <div
              id="houseCity_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseCity')">请选择所在市或区</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <label>所在区或县<span style="color:red">*</span></label>
          </td>
          <td class="ContentTD">
            <el-select
              v-model="formData.houseCounty"
              name="houseCounty"
              default-value="所在区或县"
              v-validate="'required'"
            >
              <el-option v-for="[key,val] in areaMapComputed" :label="val" :value="key" :key="key"></el-option>
            </el-select>
            <div
              id="houseCounty_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseCounty')">请选择所在区或县</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>机房地址<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-input
              v-model="formData.houseAddress"
              v-validate="'required|max:128'"
              name="houseAdd"
              maxlength="128"
              show-word-limit
            ></el-input>
            <div
              id="houseAdd_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseAdd:required')">请填写您的机房地址</span>
              <span class="field-error" v-show="errors.has('houseAdd:max')">机房地址长度最大为 128 位</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>邮编编号<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-input
              v-model="formData.zipCode"
              v-validate="'required|zipCode'"
              name="houseZip"
              maxlength="6"
              show-word-limit
            ></el-input>
            <div
              id="houseZip_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseZip:required')">请填写您的邮编编号</span>
              <span class="field-error" v-show="errors.has('houseZip:zipCode')">{{ errors.first('houseZip') }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>安全责任人<span style="color:red">*</span></td>
          <td class="ContentTD">
            <el-select
              id="houseOfficerId"
              v-model="formData.houseOfficer"
              name="houseOfficerId"
              v-validate="'required'"
            >
              <el-option
                v-for="houseOfficer in houseOfficerList"
                :value="houseOfficer.id"
                :label="houseOfficer.name"
                :key="houseOfficer.id"
              ></el-option>
            </el-select>
            <div
              id="houseOfficer_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('houseOfficerId')">请选择安全责任人</span>
            </div>
          </td>
        </tr>

        <tr>
          <td>机房区域
            <el-button
              type="primary"
              size="mini"
              @click="addHouseArea()"
            >新增
            </el-button>
          </td>
          <td class="ContentTD">
            <div name="houseAreas">
              <table
                id="tab_room"
                class="el-table el-table--border"
                border="0"
                width="100%"
              >
                <tbody>
                <tr>
                  <td>ID</td>
                  <td>区域编号</td>
                  <td>区域名称</td>
                  <td>机架数</td>
                  <td></td>
                </tr>
                <tr v-for="(houseArea,index) in formData.houseAreas">
                  <td>新增<input
                    type="hidden"
                    v-model="houseArea.areaId"
                    name="areaId"
                  ></td>
                  <td>
                    <el-input
                      v-model="houseArea.areaNumber"
                      v-validate="'max:50|area_number_validate'"
                      data-vv-delay="1000"
                      :name="'areaNumber_'+index"
                      id="roomCode"
                      maxlength="50"
                      show-word-limit
                    ></el-input>
                    <span class="field-error" v-show="errors.has('areaNumber_'+index+':max')">区域编号长度最大为 50 位</span>
                    <span class="field-error"
                          v-show="errors.has('areaNumber_'+index+':area_number_validate')">区域编号已存在</span>
                  </td>
                  <td>
                    <el-input
                      v-model="houseArea.areaName"
                      v-validate="'required|max:50'"
                      :name="'areaName_'+index"
                      id="roomName"
                      maxlength="50"
                      show-word-limit
                    ></el-input>
                    <span class="field-error" v-show="errors.has('areaName_'+index+':required')">请填写区域名称</span>
                    <span class="field-error" v-show="errors.has('areaName_'+index+':max')">区域名称长度最大为 50 位</span>
                  </td>
                  <td>
                    <el-input
                      :name="'rackNumber_'+index"
                      v-model="houseArea.rackNumber"
                      v-validate="'numeric|max:9'"
                      maxlength="9"
                      show-word-limit
                    ></el-input>
                    <span class="field-error" v-show="errors.has('rackNumber_'+index+':numeric')">{{errors.first('rackNumber_'+index)}}</span>
                    <span class="field-error" v-show="errors.has('rackNumber_'+index+':max')">机架数长度最大为 9 位</span>
                  </td>
                  <td>
                    <el-button
                      type="danger"
                      size="mini"
                      @click="deleteHouseArea(index)"
                    >删除
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
        <tr>
          <td>互联网出入口信息<span style="color:red">*</span>
            <el-button
              type="primary"
              size="mini"
              @click="addHouseLinkInfo"
            >新增
            </el-button>
          </td>
          <td class="ContentTD">
            <div>
              <table
                id="frm_ip"
                border="0"
                class="el-table el-table--border"
                width="100%"
              >
                <tbody>
                <tr>
                  <td>ID</td>
                  <td>出入口带宽</td>
                  <td>网关IP地址</td>
                  <td>链路类型</td>
                  <td>链路接入单位</td>
                  <td></td>
                </tr>
                <tr v-for="(houseLinkInfo,index) in formData.houseLinkInfos">
                  <td v-if="checkId(houseLinkInfo)">修改<input
                    type="hidden"
                    v-model="houseLinkInfo.linkInfoId"
                    name="linkInfoId"
                    value=""
                  ></td>
                  <td v-else>新增<input
                    type="hidden"
                    v-model="houseLinkInfo.linkInfoId"
                    name="linkInfoId"
                    value=""
                  ></td>

                  <td>
                    <el-input
                      maxlength="13"
                      v-model="houseLinkInfo.bandWidth"
                      :name="'bandWidth_'+index"
                      id="bandWidth"
                      v-validate="'required|numeric|max:13'"
                      show-word-limit
                    >
                      <template slot="append">Mbps</template>
                    </el-input>

                    <span class="field-error" v-show="errors.has('bandWidth_'+index+':required')">请填写出入口带宽</span>
                    <span class="field-error" v-show="errors.has('bandWidth_'+index+':numeric')">{{errors.first('bandWidth_'+index)}}</span>
                    <span class="field-error" v-show="errors.has('bandWidth_'+index+':max')">出入口带宽长度最大为 13 位</span>
                  </td>
                  <td>
                    <el-input
                      v-model="houseLinkInfo.gatewayIp"
                      :name="'gatewayIp_'+index"
                      id="gatewayIp"
                      v-validate="'required|ip'"
                    ></el-input>
                    <span class="field-error" v-show="errors.has('gatewayIp_'+index+':required')">请填写网关IP地址</span>
                    <span class="field-error" v-show="errors.has('gatewayIp_'+index+':ip')">{{errors.first('gatewayIp_'+index)}}</span>
                  </td>
                  <td>
                    <el-select
                      :name="'linkType_'+index"
                      v-model="houseLinkInfo.linkType"
                      id="linkType"
                      v-validate="'required'"
                    >
                      <el-option :value="1" :key="1" label="电信"></el-option>
                      <el-option :value="2" :key="2" label="联通"></el-option>
                      <el-option :value="3" :key="3" label="移动"></el-option>
                      <el-option :value="4" :key="4" label="铁通"></el-option>
                      <el-option :value="9" :key="9" label="其他"></el-option>
                    </el-select>
                  </td>
                  <td>
                    <el-input
                      v-model="houseLinkInfo.accessUnit"
                      v-validate="'required|max:50'"
                      :name="'accessUnit_'+index"
                      id="accessUnit"
                      maxlength="50"
                      show-word-limit
                    ></el-input>
                    <span class="field-error" v-show="errors.has('accessUnit_'+index+':required')">请填写链路接入单位</span>
                    <span class="field-error" v-show="errors.has('accessUnit_'+index+':max')">链路接入单位长度最大为 50 位</span>
                  </td>
                  <td>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteHouseLinkInfo(index)"
                    >删除
                    </el-button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div align="center">
        <el-button
          type="primary"
          @click="submitForm"
        >确认
        </el-button>
        <el-button
          @click="_forward('/basic-data/admin_house_info')"
        >返回
        </el-button>
      </div>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseLinkInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseIdcHouseAreaApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseOfficerApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseOperCompanyApi.js"></script>
  <script src="/static/js/module/basic-data/modify/admin_house_info_modify.js"></script>
</div>
</body>
</html>
